<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/css/particulars.css">
    <link rel="stylesheet" href="./static/iconfont/iconfont.css">

</head>

<body>
    <!-- 详情 -->
    <div id="dale">
        <!-- 导航 -->
        <div id="Ceiling">
            <div id="head">
                <div class="icon">
                    <ul>
                        <li style="width:200px">
                            <a href="file:///D:/%E4%BA%8C%E9%98%B6%E6%AE%B5/2108/%E9%A1%B9%E7%9B%AE/src/chuizi.html"><img
                                    src="https://shop.decorte-cosmetics.cn/themes/kaben/static/images/home/home_logo.png"
                                    alt=""></a>
                        </li>
                        <li> 明星产品</li>
                        <li>臻选礼盒</li>
                        <li class="skin">
                            <a href="">
                                护肤
                            </a>
                            <div class="pull-down">
                                <ul>
                                    <li>卸妆</li>
                                    <li>洁面</li>
                                    <li>乳液</li>
                                    <li>化妆水</li>
                                    <li>美容液</li>
                                    <li>面霜</li>
                                    <li>面膜</li>
                                    <li>按摩</li>
                                    <li>防护</li>
                                </ul>
                            </div>
                        </li>
                        <li class="cosmetics">
                            <a href="">彩妆</a>
                            <div class="pull-down1">
                                <ul>
                                    <li>腮红</li>
                                    <li>眼影</li>
                                    <li>眉笔</li>
                                    <li>眼线</li>
                                    <li>睫毛膏</li>
                                    <li>唇膏</li>
                                    <li>粉饼</li>
                                    <li>粉底液</li>
                                    <li>粉底霜</li>
                                    <li>基底乳</li>
                                    <li>蜜粉</li>
                                    <li>修颜膏</li>
                                </ul>
                            </div>
                        </li>
                        <li class="beauty">
                            <a href="">美妆工具</a>
                            <div class="pull-down2">
                                <ul>
                                    <li>护肤工具</li>
                                    <li>底妆工具</li>
                                    <li>彩妆工具</li>
                                </ul>
                            </div>
                        </li>
                        <li class="proDuct">
                            <a href="">产品系列</a>
                            <div class="pull-down3">
                                <ul>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/5/29/10//30581503.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/6/13/15//29500574.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/10/28/21//52524279.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2021/4/26/15//47019916.jpg"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/9/21/21//08018144.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/11/26/15//52356873.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/9/5/10//51571121.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/11/19/15//35548275.jpg"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//00449919.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//01294805.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//02081247.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//02249696.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//03258042.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//03400911.png"
                                            alt="">
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <li>
                            <i class="list1 across iconfont icon-wode">
                                <p class="typeface">登录</p>

                            </i>
                        </li>
                        <li>
                            <i class="list2 across iconfont icon-gouwuche">
                                <p class="typeface">购物车</p>
                            </i>
                        </li>
                        <li>
                            <i class="list3 across iconfont icon-fangdajing">
                                <p class="typeface">搜索</p>

                            </i>
                        </li>
                        <li>
                            <i class="list4 across iconfont icon-kefu">
                                <p class="typeface">客服</p>

                            </i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 介绍 -->
        <div class="introduce">
            <ul>
                <li>首页> </li>
                <li>护肤> </li>
                <li>美容液> </li>
                <li class="num" style="color: black;">黛珂保湿美容液（光耀未来版）</li>
            </ul>
        </div>
        <div class="particulars">
            <div class="left"><img
                    src="https://shop.decorte-cosmetics.cn/statics/attachment//goods/2021/6/21/17//47020753.jpg" alt="">
            </div>
            <div class="right">
                <h1>黛珂保湿美容液（光耀未来版）</h1>
                <div class="detail">
                    <p>素以卓然的保湿效果著称的美容液。 在不寻常的2021年 6月， 将限量版的瓶身，郑重地饰以象征着幸运和希望的仙鹤纹样， 清贵、祥和、姿态翩然。 那是“一同闪耀着，迎向未来”的美好心愿，
                        黛珂，将这一切，尽皆寄予其中。</p>
                    <p>对于干燥引起的肌肤粗糙、发硬等肌肤困扰有所改善，给予肌肤充分润泽的保湿美容液。</p>
                    <p>多重层微脂囊体的有效成分能有效渗透进肌肤，也能充分提高之后使用产品的功效。</p>
                    <p>
                        <strong>
                            <span>限定容量&限定设计</span>
                        </strong>
                    </p>
                    <p>光耀未来版限定瓶身 & 85mL大容量</p>
                    <p>
                        <常规版容量：40mL /60mL>
                    </p>
                    <p style="font-size: 16px;
                font-family: 华文宋体;
                color: rgb(255, 0, 0);">※限量版数量有限，一旦售罄，敬请谅解。</p>
                    <p>限时加赠（价值630元）：</p>
                    <p>黛珂保湿美容液 15mL*2</p>
                    <p>黛珂赋活精华露 14mL*2</p>

                </div>
                <div class="price ">
                    <span style="margin-right: 20px;">价格</span>
                    <span style="font-weight: 900; ">
                        ￥1050</span>
                </div>
                <div class="capacity">
                    <span class="jiu" style="margin-right: 20px;">容量</span>
                    <span class="he">85mL</span>
                </div>
                <div class="quantity">
                    <span>数量</span>
                    <input type="text" name="num" id="num" value="1" data-min="1">
                </div>
                <div class="shopping">
                    <button class="immediately">立即购买</button>
                    <button class="join">加入购物车</button>
                </div>
                <div class="use">
                    使用方法
                    <span class="jia">+</span>
                </div>
            </div>
        </div>
        <div class="recommend ">推荐搭配</div>
        <div class="match ">
            <ul>
                <li>
                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment//goods/2018/6/12/15//41389154_thumbnail.jpg"
                        alt="">
                    <p style="margin-bottom: 10px;">黛珂 赋活精华露</p>
                    <p>￥690</p>
                </li>
                <li>
                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment//goods/2018/6/12/15//41228203_thumbnail.jpg"
                        alt="">
                    <p style="margin-bottom: 10px;">黛珂 保湿赋活精华霜</p>
                    <p>￥690</p>
                </li>
                <li>
                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment//goods/2020/10/13/13//54001009_thumbnail.jpg"
                        alt="">
                    <p style="margin-bottom: 10px;">黛珂 保湿美容液</p>
                    <p>￥690</p>
                </li>
                <li>
                    <img src="https://shop.decorte-cosmetics.cn/statics/attachment//goods/2020/10/13/13//54001009_thumbnail.jpg"
                        alt="">
                    <p style="margin-bottom: 10px;">黛珂 保湿美容液</p>
                    <p>￥890</p>
                </li>
            </ul>
        </div>
        <!-- 底部 -->
        <div class="bottom">
            <div class="typeArea">
                <ul>
                    <li>客户服务</li>
                    <li>退货规定</li>
                    <li>查看我的订单</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li>联系我们：400-920-2203</li>
                    <li>投诉与建议</li>
                    <li>珍颜会会员中心</li>
                </ul>
                <ul>
                    <li>关于黛珂</li>
                    <li>品牌故事</li>
                    <li>黛珂保养概念</li>
                    <li>美容中心</li>
                    <li>门店查询</li>
                </ul>
                <ul>
                    <li>关注我们</li>
                    <li>
                        <img src="https://shop.decorte-cosmetics.cn/themes/kaben/static/images/home/QR.jpg" alt="">
                        <p>扫描二维码</p>
                        <p>关注黛珂中国官方微信</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            <div class="copyright1">
                <span>© 高丝化妆品销售（中国）有限公司版权所有</span>
                <span>沪ICP备09002279号-17</span>
                <span>公网安备 31010902002154号</span><br>
                <span>国家药监局提示您：请正确认识化妆品功效，化妆品不能替代药品，不能治疗皮肤病等疾病</span>
            </div>
        </div>
    </div>
    <script src="../dist/static/ajax.js"></script>
    <script src="../dist/static/jQuery.js"></script>
    <script>
        var dale=document.getElementById("dale")
                ajax({
                     url: "http://127.0.0.1:8080/src/static/data/list.json",
                     callback: render

                })
            function render(res){
                res=JSON.parse(res)
                let num = res.list[location.hash.split("=")[1]-2]
                if((location.hash.split("=")[1]-2) >= 0){
                dale.innerHTML=
                `
    
    <div id="dale">
        <!-- 导航 -->
        <div id="Ceiling">
            <div id="head">
                <div class="icon">
                    <ul>
                        <li style="width:200px">
                            <a href="file:///D:/%E4%BA%8C%E9%98%B6%E6%AE%B5/2108/%E9%A1%B9%E7%9B%AE/src/chuizi.html"><img
                                    src="https://shop.decorte-cosmetics.cn/themes/kaben/static/images/home/home_logo.png"
                                    alt=""></a>
                        </li>
                        <li> 明星产品</li>
                        <li>臻选礼盒</li>
                        <li class="skin">
                            <a href="">
                                护肤
                            </a>
                            <div class="pull-down">
                                <ul>
                                    <li>卸妆</li>
                                    <li>洁面</li>
                                    <li>乳液</li>
                                    <li>化妆水</li>
                                    <li>美容液</li>
                                    <li>面霜</li>
                                    <li>面膜</li>
                                    <li>按摩</li>
                                    <li>防护</li>
                                </ul>
                            </div>
                        </li>
                        <li class="cosmetics">
                            <a href="">彩妆</a>
                            <div class="pull-down1">
                                <ul>
                                    <li>腮红</li>
                                    <li>眼影</li>
                                    <li>眉笔</li>
                                    <li>眼线</li>
                                    <li>睫毛膏</li>
                                    <li>唇膏</li>
                                    <li>粉饼</li>
                                    <li>粉底液</li>
                                    <li>粉底霜</li>
                                    <li>基底乳</li>
                                    <li>蜜粉</li>
                                    <li>修颜膏</li>
                                </ul>
                            </div>
                        </li>
                        <li class="beauty">
                            <a href="">美妆工具</a>
                            <div class="pull-down2">
                                <ul>
                                    <li>护肤工具</li>
                                    <li>底妆工具</li>
                                    <li>彩妆工具</li>
                                </ul>
                            </div>
                        </li>
                        <li class="proDuct">
                            <a href="">产品系列</a>
                            <div class="pull-down3">
                                <ul>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/5/29/10//30581503.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/6/13/15//29500574.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/10/28/21//52524279.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2021/4/26/15//47019916.jpg"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/9/21/21//08018144.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2019/11/26/15//52356873.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/9/5/10//51571121.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/11/19/15//35548275.jpg"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//00449919.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//01294805.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//02081247.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//02249696.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//03258042.png"
                                            alt="">
                                    </li>
                                    <li>
                                        <img src="https://shop.decorte-cosmetics.cn/statics/attachment/goodscat/2018/8/2/14//03400911.png"
                                            alt="">
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list">
                    <ul>
                        <li>
                            <i class="list1 across iconfont icon-wode">
                                <p class="typeface">登录</p>

                            </i>
                        </li>
                        <li>
                            <i class="list2 across iconfont icon-gouwuche">
                                <p class="typeface">购物车</p>
                            </i>
                        </li>
                        <li>
                            <i class="list3 across iconfont icon-fangdajing">
                                <p class="typeface">搜索</p>

                            </i>
                        </li>
                        <li>
                            <i class="list4 across iconfont icon-kefu">
                                <p class="typeface">客服</p>

                            </i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 介绍 -->
        <div class="introduce">
            <ul>
                <li>首页> </li>
                <li>护肤> </li>
                <li>美容液> </li>
                <li class="num" style="color: black;">${num.headline}</li>
            </ul>
        </div>
        <div class="particulars">
            <div class="left"><img
                    src="${num.img}">
            </div>
            <div class="right">
                <h1>${num.headline}</h1>
                <div class="detail">
                    <p>${num.introduce1}</p>
                    <p>${num.introduce3}</p>
                    <p>${num.introduce4}</p>
                    <p>
                        <strong>
                            <span>限定容量&限定设计</span>
                        </strong>
                    </p>
                    <p>${num.introduce5}</p>
                    <p>
                        ${num.introduce6}
                    </p>
                    <p style="font-size: 16px;
                font-family: 华文宋体;
                color: rgb(255, 0, 0);">${num.introduce7}</p>
                    <p>${num.introduce10}：</p>
                    <p>${num.introduce8}</p>
                    <p>${num.introduce9}</p>

                </div>
                <div class="price ">
                    <span style="margin-right: 20px;">${num.price}</span>
                    <span style="font-weight: 900; ">
                        ${num.price5}</span>
                </div>
                <div class="capacity">
                    <span class="jiu" style="margin-right: 20px;">容量</span>
                    <span class="he">85mL</span>
                </div>
                <div class="quantity">
                    <span>数量</span>
                    <input type="text" name="num" id="num" value="1" data-min="1">
                </div>
                <div class="shopping">
                    <button class="immediately">立即购买</button>
                    <button class="join">加入购物车</button>
                </div>
                <div class="use">
                    使用方法
                    <span class="jia">+</span>
                </div>
            </div>
        </div>
        <div class="recommend ">推荐搭配</div>
        <div class="match ">
            <ul>
                <li>
                    <img src="${num.colour}">
                    <p style="margin-bottom: 10px;">${num.commodity}</p>
                    <p>${num.price1}</p>
                </li>
                <li>
                    <img src="${num.colour1}">
                    <p style="margin-bottom: 10px;">${num.commodity1}</p>
                    <p>${num.price2}</p>
                </li>
                <li>
                    <img src="${num.colour2}">
                    <p style="margin-bottom: 10px;">${num.commodity2}</p>
                    <p>${num.price3}</p>
                </li>
                <li>
                    <img src="${num.colour3}">
                    <p style="margin-bottom: 10px;">${num.commodity3}</p>
                    <p>${num.price4    }</p>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <div class="typeArea">
                <ul>
                    <li>客户服务</li>
                    <li>退货规定</li>
                    <li>查看我的订单</li>
                    <li>常见问题</li>
                </ul>
                <ul>
                    <li>帮助中心</li>
                    <li>联系我们：400-920-2203</li>
                    <li>投诉与建议</li>
                    <li>珍颜会会员中心</li>
                </ul>
                <ul>
                    <li>关于黛珂</li>
                    <li>品牌故事</li>
                    <li>黛珂保养概念</li>
                    <li>美容中心</li>
                    <li>门店查询</li>
                </ul>
                <ul>
                    <li>关注我们</li>
                    <li>
                        <img src="https://shop.decorte-cosmetics.cn/themes/kaben/static/images/home/QR.jpg" alt="">
                        <p>扫描二维码</p>
                        <p>关注黛珂中国官方微信</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 版权 -->
        <div class="copyright">
            <div class="copyright1">
                <span>© 高丝化妆品销售（中国）有限公司版权所有</span>
                <span>沪ICP备09002279号-17</span>
                <span>公网安备 31010902002154号</span><br>
                <span>国家药监局提示您：请正确认识化妆品功效，化妆品不能替代药品，不能治疗皮肤病等疾病</span>
            </div>
        </div>
    </div>
                `
            }
        }
    </script>
</body>

</html>